---
type: integration
title: '@astrojs/svelte'
description: '@astrojs/svelte 프레임워크 통합을 사용하여 Astro 프로젝트에서 컴포넌트 지원을 확장하는 방법을 알아보세요.'
sidebar:
  label: Svelte
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/svelte/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';

이 **[Astro 통합][astro-integration]을** 통해 [Svelte](https://svelte.dev/) 5 컴포넌트에 대한 렌더링 및 클라이언트 측 하이드레이션이 가능해집니다. Svelte 3 및 4를 지원하려면 `@astrojs/svelte@5`를 설치하세요.

## 설치

Astro에는 공식 통합 설정을 자동화하는 `astro add` 명령이 포함되어 있습니다. 원하는 경우 대신 [통합을 수동으로 설치](#수동-설치)할 수 있습니다.

`@astrojs/svelte`를 설치하려면 프로젝트 디렉터리에서 다음을 실행하고 프롬프트를 따르세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npx astro add svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm astro add svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn astro add svelte
  ```
  </Fragment>
</PackageManagerTabs>

문제가 발생하면 [GitHub에서 언제든지 보고](https://github.com/withastro/astro/issues)하고 아래 수동 설치 단계를 시도해 보세요.

### 수동 설치

먼저 `@astrojs/svelte` 패키지를 설치하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add @astrojs/svelte
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add @astrojs/svelte
  ```
  </Fragment>
</PackageManagerTabs>

대부분의 패키지 관리자는 관련 피어 종속성도 설치합니다. Astro를 시작할 때 `Cannot find package 'svelte'` (또는 이와 유사한) 경고가 표시되면 Svelte 및 TypeScript를 설치해야 합니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```sh
  npm install svelte typescript
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```sh
  pnpm add svelte typescript
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```sh
  yarn add svelte typescript
  ```
  </Fragment>
</PackageManagerTabs>

그런 다음 `integrations` 속성을 사용하여 `astro.config.*` 파일에 통합을 적용합니다.

```js title="astro.config.mjs" ins={2} ins="svelte()"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  // ...
  integrations: [svelte()],
});
```

그리고 프로젝트 루트 디렉터리에 `svelte.config.js` 파일을 생성하고 다음 코드를 추가하세요.

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
}
```

## 시작하기

Astro에서 첫 번째 Svelte 컴포넌트를 사용하려면 [UI 프레임워크 문서][astro-ui-frameworks]로 이동하세요. 다음을 탐색하게 됩니다.

* 📦 프레임워크 구성요소가 로드되는 방식,
* 💧 클라이언트 측 하이드레이션 옵션
* 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회

## 옵션

이 통합은 `@sveltejs/vite-plugin-svelte`에 의해 제공됩니다. Svelte 컴파일러를 사용자 정의하기 위해 통합에 옵션을 제공할 수 있습니다. 자세한 내용은 [`@sveltejs/vite-plugin-svelte` 문서](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/config.md)를 참조하세요.

`astro.config.mjs`의 `svelte` 통합에 이를 전달하거나 `svelte.config.js`에 전달하여 옵션을 설정할 수 있습니다. 두 옵션이 모두 있는 경우 `astro.config.mjs`의 옵션이 `svelte.config.js`의 옵션보다 우선합니다:

```js title="astro.config.mjs" "extensions: ['.svelte']"
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';

export default defineConfig({
  integrations: [svelte({ extensions: ['.svelte'] })],
});
```

```js title="svelte.config.js"
export default {
  extensions: ['.svelte'],
};
```

## 전처리기

<Since v="2.0.0" pkg="@astrojs/svelte" />

Svelte 파일에서 SCSS 또는 Stylus를 사용하는 경우, `svelte.config.js` 파일을 생성하여 Svelte에서 전처리하도록 하면 Svelte IDE 확장이 Svelte 파일을 올바르게 구문 분석할 수 있습니다.

```js title="svelte.config.js"
import { vitePreprocess } from '@astrojs/svelte';

export default {
  preprocess: vitePreprocess(),
};
```

이 구성 파일은 `astro add svelte`를 실행할 때 자동으로 추가됩니다.

`vitePreprocess`에 대한 자세한 내용은 [`@sveltejs/vite-plugin-svelte` 문서](https://github.com/sveltejs/vite-plugin-svelte/blob/HEAD/docs/preprocess.md)를 참조하세요.

[astro-integration]: /ko/guides/integrations-guide/

[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용
